<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动专项测试平台</title>
    <!-- 引入Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="/static/css/main.css">
    <style>
        /* 添加自定义样式确保菜单展开状态 */
        .el-menu .el-menu-item:hover,
        .el-menu .el-submenu__title:hover {
            background-color: #ecf5ff;
        }
        
        .el-menu-item.is-active {
            background-color: #1890ff !important;
            color: white !important;
            /* 确保选中项完全填充父容器 */
            padding: 0 20px !important;
            margin: 0 !important;
            /* 移除右侧突出的背景色 */
            border-right: none !important;
            /* 确保背景色从最左侧开始填充 */
            background-clip: padding-box !important;
        }
        
        /* 特别处理子菜单中的选中项 */
        .el-submenu .el-menu-item.is-active {
            /* 关键调整：让背景色完全填充，同时避免右侧突出 */
            padding-left: 15px !important; /* 适当的左边距 */
            padding-right: 15px !important; /* 适当的右边距，避免突出 */
            margin-left: 0 !important;
            margin-right: 0 !important;
            border-right: none !important;
            border-left: none !important;
            /* 关键：使用content-box确保背景色不会超出内容区域 */
            background-clip: content-box !important;
            /* 使用负的左右内边距来抵消可能的父容器padding */
            margin-left: -5px !important;
            margin-right: -5px !important;
            /* 调整宽度确保完全填充 */
            width: calc(100% + 10px) !important;
        }
        
        /* 确保子菜单容器没有额外的内边距 */
        .el-submenu .el-menu {
            padding: 0 !important;
            /* 移除可能导致留白的样式 */
            border-left: none !important;
            border-right: none !important;
            /* 确保子菜单容器宽度足够 */
            width: 100% !important;
        }
        
        /* 确保子菜单项中的图标位置正确 */
        .el-submenu .el-menu-item.is-active i {
            /* 确保图标在正确的位置显示 */
            margin-left: 20px;
            margin-right: 8px;
        }
        
        .el-submenu .el-menu-item.is-active span {
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 100vh; border: 1px solid #eee;">
            <!-- 顶部导航栏 -->
            <el-header style="background-color: #1890ff; color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
                <div style="font-size: 18px; font-weight: bold;">移动专项测试平台</div>
                <!-- 个人中心菜单 -->
                <el-dropdown @command="handleDropdownCommand">
                    <div style="display: flex; align-items: center; color: white;">
                        <img :src="userAvatar" alt="用户头像" style="width: 32px; height: 32px; border-radius: 50%; margin-right: 8px;">
                        <span>{{ userName }}</span>
                        <i class="el-icon-arrow-down el-icon--right" style="margin-left: 5px;"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userProfile"><i class="el-icon-user"></i>个人中心</el-dropdown-item>
                        <el-dropdown-item command="settings"><i class="el-icon-setting"></i>系统设置</el-dropdown-item>
                        <el-dropdown-item command="logout" style="color: #ff4949;"><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="220px" style="background-color: #f0f2f5; padding: 10px 15px; border-right: 1px solid #e4e7ed; margin-right: 10px; overflow: hidden;">
                    <el-menu 
                        :default-openeds="['1', '2', '3']" 
                        :collapse-transition="false" 
                        :default-active="currentMenuIndex" 
                        ref="menu"
                        @open="handleMenuOpen"
                        @close="handleMenuClose">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-laptop"></i>设备管理</template>
                            <el-menu-item index="1-1" @click="changeView('deviceList', '1-1')"><i class="el-icon-monitor"></i>设备列表</el-menu-item>
                            <el-menu-item index="1-2" @click="changeView('multiControl', '1-2')"><i class="el-icon-mouse"></i>一机多控</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-s-operation"></i>任务管理</template>
                            <el-menu-item index="2-1" @click="changeView('taskList', '2-1')"><i class="el-icon-list"></i>任务列表</el-menu-item>
                            <el-menu-item index="2-2" @click="changeView('createTask', '2-2')"><i class="el-icon-circle-plus-outline"></i>创建任务</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-document"></i>脚本管理</template>
                            <el-menu-item index="3-1" @click="changeView('scriptList', '3-1')"><i class="el-icon-document-copy"></i>脚本列表</el-menu-item>
                            <el-menu-item index="3-2" @click="changeView('createScript', '3-2')"><i class="el-icon-edit-outline"></i>创建脚本</el-menu-item>
                            <el-menu-item index="3-3" @click="changeView('uploadScript', '3-3')"><i class="el-icon-upload"></i>上传脚本</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                
                <!-- 主内容区 -->
                <el-main style="padding: 20px; overflow-y: auto;">
                    <!-- 设备列表视图 -->
                    <div v-if="currentView === 'deviceList'">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>设备列表</span>
                                <el-button style="float: right;" type="primary" size="small" @click="refreshDevices">刷新</el-button>
                            </div>
                            {% raw %}
                            <el-table :data="devices" style="width: 100%">
                                <el-table-column prop="device_name" label="设备名称" min-width="160"></el-table-column>
                                <el-table-column prop="device_id" label="设备ID" min-width="180"></el-table-column>
                                <el-table-column prop="model" label="型号" min-width="140"></el-table-column>
                                <el-table-column prop="brand" label="品牌" min-width="100"></el-table-column>
                                <el-table-column prop="os_version" label="系统版本" min-width="100"></el-table-column>
                                <el-table-column prop="status" label="状态" min-width="100">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status === '在线' ? 'success' : (scope.row.status === '忙碌' ? 'warning' : 'danger')">
                                            [[ scope.row.status ]]
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="battery_level" label="电量" min-width="100">
                                    <template slot-scope="scope">
                                        [[ scope.row.battery_level ]]%
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="170" fixed="right">
                                    <template slot-scope="scope">
                                        <div style="display: flex; gap: 8px;">
                                            <el-button type="primary" size="small" @click="viewDevice(scope.row.device_id)">查看</el-button>
                                            <el-button type="success" size="small" @click="controlDevice(scope.row.device_id)">控制</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            {% endraw %}
                        </el-card>
                    </div>
                    
                    <!-- 一机多控视图 -->
                    <div v-if="currentView === 'multiControl'">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>一机多控</span>
                                <el-button style="float: right;" type="primary" size="small" @click="selectAllDevices">全选</el-button>
                            </div>
                            <div style="margin-bottom: 20px;">
                                <el-checkbox-group v-model="selectedDevices">
                                    <div v-for="device in availableDevices" :key="device.device_id">
                                        <el-checkbox :label="device.device_id" style="margin-right: 20px;">[[ device.device_name ]]</el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                            <div v-if="selectedDevices.length > 0">
                                <el-form inline>
                                    <el-form-item label="操作类型：">
                                        <el-select v-model="multiControlType">
                                            <el-option label="点击" value="tap"></el-option>
                                            <el-option label="滑动" value="swipe"></el-option>
                                            <el-option label="文本输入" value="text"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <template v-if="multiControlType === 'tap'">
                                        <el-form-item label="X：">
                                            <el-input-number v-model="tapX" :min="0" :max="1920"></el-input-number>
                                        </el-form-item>
                                        <el-form-item label="Y：">
                                            <el-input-number v-model="tapY" :min="0" :max="1080"></el-input-number>
                                        </el-form-item>
                                    </template>
                                    <template v-if="multiControlType === 'swipe'">
                                        <el-form-item label="X1：">
                                            <el-input-number v-model="swipeX1" :min="0" :max="1920"></el-input-number>
                                        </el-form-item>
                                        <el-form-item label="Y1：">
                                            <el-input-number v-model="swipeY1" :min="0" :max="1080"></el-input-number>
                                        </el-form-item>
                                        <el-form-item label="X2：">
                                            <el-input-number v-model="swipeX2" :min="0" :max="1920"></el-input-number>
                                        </el-form-item>
                                        <el-form-item label="Y2：">
                                            <el-input-number v-model="swipeY2" :min="0" :max="1080"></el-input-number>
                                        </el-form-item>
                                    </template>
                                    <template v-if="multiControlType === 'text'">
                                        <el-form-item label="文本：">
                                            <el-input v-model="inputText" placeholder="请输入文本"></el-input>
                                        </el-form-item>
                                    </template>
                                    <el-form-item>
                                        <el-button type="primary" @click="executeMultiControl">执行</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-card>
                    </div>
                    
                    <!-- 任务列表视图 -->
                    <div v-if="currentView === 'taskList'">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>任务列表</span>
                                <el-button style="float: right;" type="primary" size="small" @click="changeView('createTask')">创建任务</el-button>
                            </div>
                            <el-table :data="tasks" style="width: 100%">
                                <el-table-column prop="name" label="任务名称" min-width="180"></el-table-column>
                                <el-table-column prop="description" label="描述" min-width="250"></el-table-column>
                                <el-table-column prop="status" label="状态" min-width="120">
                                    <template slot-scope="scope">
                                        <el-tag :type="getStatusType(scope.row.status)">
                                            [[ scope.row.status ]]
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="priority" label="优先级" min-width="110"></el-table-column>
                                <el-table-column prop="created_at" label="创建时间" min-width="200"></el-table-column>
                                <el-table-column label="操作" min-width="160">
                                    <template slot-scope="scope">
                                        <div style="display: flex; gap: 8px;">
                                            <el-button type="primary" size="small" @click="viewTask(scope.row.id)">查看</el-button>
                                            <template v-if="scope.row.status === '等待中'">
                                                <el-button type="danger" size="small" @click="cancelTask(scope.row.id)">取消</el-button>
                                            </template>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                    
                    <!-- 创建任务视图 -->
                    <div v-if="currentView === 'createTask'">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>创建任务</span>
                            </div>
                            <el-form :model="taskForm" :rules="taskRules" ref="taskForm">
                                <el-form-item label="任务名称" prop="name">
                                    <el-input v-model="taskForm.name" placeholder="请输入任务名称"></el-input>
                                </el-form-item>
                                <el-form-item label="任务描述" prop="description">
                                    <el-input type="textarea" v-model="taskForm.description" placeholder="请输入任务描述"></el-input>
                                </el-form-item>
                                <el-form-item label="选择脚本" prop="script_id">
                                    <el-select v-model="taskForm.script_id" placeholder="请选择脚本">
                                        <el-option v-for="script in scripts" :key="script.id" :label="script.name" :value="script.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="优先级" prop="priority">
                                    <el-input-number v-model="taskForm.priority" :min="1" :max="5" :step="1"></el-input-number>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitTaskForm">提交</el-button>
                                    <el-button @click="resetTaskForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </div>
                    
                    <!-- 个人中心视图 -->
                    <div v-if="currentView === 'userProfile'">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>个人中心</span>
                            </div>
                            <div style="display: flex; flex-direction: column; align-items: center; padding: 30px 0;">
                                <!-- 用户头像 -->
                                <div style="margin-bottom: 20px; position: relative;">
                                    <img :src="userAvatar" alt="用户头像" style="width: 120px; height: 120px; border-radius: 50%; border: 3px solid #e0e0e0;">
                                </div>
                                
                                <!-- 用户基本信息 -->
                                <div style="margin-bottom: 30px; text-align: center;">
                                    <h2 style="margin: 0 0 10px 0;">{{ userName }}</h2>
                                </div>
                                
                                <!-- 个人设置表单 -->
                                <el-form :model="userInfoForm" label-width="80px" style="width: 80%; max-width: 500px;">
                                    <el-form-item label="用户名">
                                        <el-input v-model="userInfoForm.userName" placeholder="请输入用户名"></el-input>
                                    </el-form-item>
                                    
                                    <el-form-item label="性别">
                                        <el-radio-group v-model="userInfoForm.gender" @change="handleGenderChange">
                                            <el-radio label="male">男</el-radio>
                                            <el-radio label="female">女</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    
                                    <el-form-item>
                                        <el-button type="primary" @click="saveUserInfo">保存</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-card>
                    </div>
                    
                    <!-- 脚本列表视图 -->
                    <div v-if="currentView === 'scriptList'">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>脚本列表</span>
                                <el-button style="float: right; margin-left: 10px;" type="primary" size="small" @click="changeView('uploadScript')">上传脚本</el-button>
                                <el-button style="float: right;" type="primary" size="small" @click="changeView('createScript')">创建脚本</el-button>
                            </div>
                            <el-table :data="scripts" style="width: 100%">
                                <el-table-column prop="name" label="脚本名称" min-width="160"></el-table-column>
                                <el-table-column prop="description" label="描述" min-width="200"></el-table-column>
                                <el-table-column prop="language" label="语言" min-width="100"></el-table-column>
                                <el-table-column prop="version" label="版本" min-width="100"></el-table-column>
                                <el-table-column prop="created_at" label="创建时间" min-width="160"></el-table-column>
                                <el-table-column label="操作" min-width="140">
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="small" @click="viewScript(scope.row.id)">查看</el-button>
                                        <el-button type="danger" size="small" @click="deleteScript(scope.row.id)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                    
                    <!-- 创建脚本视图 -->
                    <div v-if="currentView === 'createScript'">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>创建脚本</span>
                            </div>
                            <el-form :model="scriptForm" :rules="scriptRules" ref="scriptForm">
                                <el-form-item label="脚本名称" prop="name">
                                    <el-input v-model="scriptForm.name" placeholder="请输入脚本名称"></el-input>
                                </el-form-item>
                                <el-form-item label="脚本描述" prop="description">
                                    <el-input type="textarea" v-model="scriptForm.description" placeholder="请输入脚本描述"></el-input>
                                </el-form-item>
                                <el-form-item label="脚本语言" prop="language">
                                    <el-select v-model="scriptForm.language" placeholder="请选择脚本语言">
                                        <el-option label="Python" value="python"></el-option>
                                        <el-option label="Shell" value="shell"></el-option>
                                        <el-option label="Java" value="java"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="脚本内容" prop="content">
                                    <el-input type="textarea" v-model="scriptForm.content" placeholder="请输入脚本内容" style="height: 300px;"></el-input>
                                </el-form-item>
                                <el-form-item label="公开脚本">
                                    <el-switch v-model="scriptForm.is_public"></el-switch>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitScriptForm">提交</el-button>
                                    <el-button @click="resetScriptForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </div>
                    
                    <!-- 上传脚本视图 -->
                    <div v-if="currentView === 'uploadScript'">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>上传脚本</span>
                            </div>
                            <el-upload
                                class="upload-demo"
                                drag
                                action="/api/scripts/upload"
                                :on-success="handleUploadSuccess"
                                :on-error="handleUploadError"
                                :file-list="fileList"
                                :auto-upload="false"
                                name="file">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">支持 .py, .sh, .java 等脚本文件</div>
                            </el-upload>
                            <el-form :model="uploadForm" style="margin-top: 20px;">
                                <el-form-item label="脚本描述">
                                    <el-input type="textarea" v-model="uploadForm.description" placeholder="请输入脚本描述"></el-input>
                                </el-form-item>
                                <el-form-item label="脚本语言">
                                    <el-select v-model="uploadForm.language" placeholder="请选择脚本语言">
                                        <el-option label="Python" value="python"></el-option>
                                        <el-option label="Shell" value="shell"></el-option>
                                        <el-option label="Java" value="java"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="公开脚本">
                                    <el-switch v-model="uploadForm.is_public"></el-switch>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitUpload">上传</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </div>
                    
                    <!-- 设备控制视图 -->
                    <div v-if="currentView === 'deviceControl' && selectedDevice">
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>设备控制 - [[ selectedDevice.device_name ]]</span>
                                <el-button style="float: right;" type="danger" size="small" @click="stopDeviceControl">退出</el-button>
                            </div>
                            <div style="display: flex; flex-direction: column; align-items: center;">
                                <!-- 增强的设备信息卡片 -->
                                <div class="device-info-card" style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px; width: 100%; max-width: 800px; background-color: #fafafa;">
                                    <div style="text-align: center; margin-bottom: 20px;">
                                        <div style="font-size: 24px; font-weight: bold; color: #1890ff;">[[ selectedDevice.device_name ]]</div>
                                        <div style="color: #666; margin-top: 5px;">设备ID: [[ selectedDevice.device_id ]]</div>
                                    </div>
                                    
                                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px;">
                                        <div class="info-item" style="background-color: white; padding: 15px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                            <div style="font-size: 14px; color: #666;">型号</div>
                                            <div style="font-size: 18px; font-weight: bold; margin-top: 5px;">[[ selectedDevice.model ]]</div>
                                        </div>
                                        
                                        <div class="info-item" style="background-color: white; padding: 15px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                            <div style="font-size: 14px; color: #666;">品牌</div>
                                            <div style="font-size: 18px; font-weight: bold; margin-top: 5px;">[[ selectedDevice.brand ]]</div>
                                        </div>
                                        
                                        <div class="info-item" style="background-color: white; padding: 15px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                            <div style="font-size: 14px; color: #666;">系统版本</div>
                                            <div style="font-size: 18px; font-weight: bold; margin-top: 5px;">[[ selectedDevice.os_version ]]</div>
                                        </div>
                                        
                                        <div class="info-item" style="background-color: white; padding: 15px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                            <div style="font-size: 14px; color: #666;">电量</div>
                                            <div style="font-size: 18px; font-weight: bold; margin-top: 5px;" :style="{ color: selectedDevice.battery_level > 30 ? '#52c41a' : '#ff4d4f' }">[[ selectedDevice.battery_level ]]%</div>
                                        </div>
                                    </div>
                                    
                                    <div style="background-color: white; padding: 15px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                                        <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px;">设备状态</div>
                                        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                                            <el-tag :type="selectedDevice.status === '在线' ? 'success' : (selectedDevice.status === '忙碌' ? 'warning' : 'danger')">
                                                [[ selectedDevice.status ]]
                                            </el-tag>
                                            <el-tag type="info" v-if="selectedDevice.is_usb_connected">USB连接</el-tag>
                                            <el-tag type="info" v-else>WiFi连接</el-tag>
                                            <el-tag v-if="selectedDevice.is_charging" type="primary">
                                                充电中
                                            </el-tag>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex; gap: 10px;">
                                    <el-button @click="sendHomeCommand">Home</el-button>
                                    <el-button @click="sendBackCommand">Back</el-button>
                                    <el-button @click="sendRecentAppsCommand">Recent Apps</el-button>
                                    <el-input v-model="inputCommand" placeholder="输入命令" style="width: 300px;"></el-input>
                                    <el-button type="primary" @click="executeCommand">执行命令</el-button>
                                </div>
                                <div style="margin-top: 20px; width: 100%;">
                                    <el-tabs v-model="commandTab">
                                        <el-tab-pane label="执行结果">
                                            <el-input type="textarea" :value="commandResult" readonly style="height: 200px;"></el-input>
                                        </el-tab-pane>
                                        <el-tab-pane label="设备信息">
                                            <el-form label-width="120px" :model="selectedDevice">
                                                <el-form-item label="设备ID">
                                                    [[ selectedDevice.device_id ]]
                                                </el-form-item>
                                                <el-form-item label="型号">
                                                    [[ selectedDevice.model ]]
                                                </el-form-item>
                                                <el-form-item label="品牌">
                                                    [[ selectedDevice.brand ]]
                                                </el-form-item>
                                                <el-form-item label="系统版本">
                                                    [[ selectedDevice.os_version ]]
                                                </el-form-item>
                                                <el-form-item label="电量">
                                                    [[ selectedDevice.battery_level ]]%
                                                </el-form-item>
                                                <el-form-item label="连接方式">
                                                    <span>[[ selectedDevice.is_usb_connected ? 'USB' : 'WiFi' ]]</span>
                                                </el-form-item>
                                            </el-form>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入Element UI JS -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入自定义JS -->
    <script>
        new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data() {
                return {
                    currentView: 'deviceList',
                    currentMenuIndex: '1-1',
                    // 用户信息
                    userName: '管理员',
                    userGender: 'male', // 默认性别: male或female
                    userAvatar: '/static/images/default-avatar-male.svg', // 默认使用男性头像
                    openedMenus: ['1', '2', '3'], // 默认展开所有菜单
                    // 其他数据...
                    devices: [
                        { device_name: '测试设备1', device_id: 'device001', model: 'Pixel 4', brand: 'Google', os_version: 'Android 11', status: '在线', battery_level: 85 },
                        { device_name: '测试设备2', device_id: 'device002', model: 'iPhone 12', brand: 'Apple', os_version: 'iOS 14', status: '忙碌', battery_level: 42 },
                        { device_name: '测试设备3', device_id: 'device003', model: 'Galaxy S21', brand: 'Samsung', os_version: 'Android 11', status: '离线', battery_level: 0 }
                    ],
                    tasks: [
                        { id: 1, name: '兼容性测试', description: '测试应用在不同设备上的兼容性', status: '运行中', priority: 3, created_at: '2023-06-15 10:30:00' },
                        { id: 2, name: '性能测试', description: '测试应用性能表现', status: '等待中', priority: 2, created_at: '2023-06-15 09:15:00' },
                        { id: 3, name: 'UI自动化测试', description: '自动化UI测试', status: '已完成', priority: 1, created_at: '2023-06-14 16:45:00' }
                    ],
                    scripts: [
                        { id: 1, name: '登录测试', description: '测试用户登录流程', language: 'Python', version: '1.0', created_at: '2023-06-10 14:20:00' },
                        { id: 2, name: '性能监控', description: '监控应用性能指标', language: 'Shell', version: '1.2', created_at: '2023-06-12 11:05:00' }
                    ],
                    selectedDevice: null,
                    availableDevices: [],
                    selectedDevices: [],
                    multiControlType: 'tap',
                    tapX: 100,
                    tapY: 200,
                    swipeX1: 100,
                    swipeY1: 200,
                    swipeX2: 300,
                    swipeY2: 400,
                    inputText: '',
                    // 个人中心表单数据
                    userInfoForm: {
                        userName: '管理员',
                        gender: 'male'
                    },
                    taskForm: {
                        name: '',
                        description: '',
                        script_id: '',
                        priority: 1
                    },
                    scriptForm: {
                        name: '',
                        description: '',
                        language: '',
                        content: '',
                        is_public: false
                    },
                    uploadForm: {
                        description: '',
                        language: '',
                        is_public: false
                    },
                    fileList: [],
                    inputCommand: '',
                    commandResult: '',
                    commandTab: '0',
                    taskRules: {
                        name: [
                            { required: true, message: '请输入任务名称', trigger: 'blur' }
                        ]
                    },
                    scriptRules: {
                        name: [
                            { required: true, message: '请输入脚本名称', trigger: 'blur' }
                        ],
                        language: [
                            { required: true, message: '请选择脚本语言', trigger: 'change' }
                        ],
                        content: [
                            { required: true, message: '请输入脚本内容', trigger: 'blur' }
                        ]
                    }
                };
            },
            methods: {
                // 个人中心相关方法
                goToUserProfile() {
                    // 跳转到个人中心页面
                    this.changeView('userProfile');
                    // 确保表单数据与当前用户信息同步
                    this.userInfoForm.userName = this.userName;
                    this.userInfoForm.gender = this.userGender;
                },
                goToSettings() {
                    // 跳转到系统设置页面
                    alert('进入系统设置');
                },
                
                // 根据性别设置头像
                setAvatarByGender(gender) {
                    this.userGender = gender;
                    if (gender === 'male') {
                      this.userAvatar = '/static/images/default-avatar-male.svg';
                    } else if (gender === 'female') {
                      this.userAvatar = '/static/images/default-avatar-female.svg';
                    }
                },
                logout() {
                    // 退出登录
                    if (confirm('确定要退出登录吗？')) {
                        alert('退出登录成功');
                    }
                },
                
                // 处理性别改变
                handleGenderChange(value) {
                    // 当性别改变时，立即更新头像
                    this.setAvatarByGender(value);
                },
                
                // 保存用户信息
                saveUserInfo() {
                    // 更新用户信息
                    this.userName = this.userInfoForm.userName;
                    this.userGender = this.userInfoForm.gender;
                    // 确保头像与性别一致
                    this.setAvatarByGender(this.userInfoForm.gender);
                    
                    // 显示保存成功提示
                    this.$message({
                        message: '个人信息保存成功',
                        type: 'success'
                    });
                },
                
                // 处理下拉菜单命令
                handleDropdownCommand(command) {
                    if (command === 'userProfile') {
                        this.goToUserProfile();
                    } else if (command === 'settings') {
                        this.goToSettings();
                    } else if (command === 'logout') {
                        this.logout();
                    }
                },
                changeView(view, index) {
                    this.currentView = view;
                    if (index) {
                        this.currentMenuIndex = index;
                    }

                    // 保持菜单展开状态
                    const parentIndex = index.split('-')[0];
                    if (this.openedMenus.indexOf(parentIndex) === -1) {
                        this.openedMenus.push(parentIndex);
                    }
                },
                handleMenuOpen(index) {
                    // 当菜单打开时，确保它在展开列表中
                    if (this.openedMenus.indexOf(index) === -1) {
                        this.openedMenus.push(index);
                    }
                },
                handleMenuClose(index) {
                    // 当菜单关闭时，从展开列表中移除
                    const idx = this.openedMenus.indexOf(index);
                    if (idx > -1) {
                        this.openedMenus.splice(idx, 1);
                    }
                },
                refreshDevices() {
                    // 刷新设备列表
                    alert('刷新设备列表');
                },
                viewDevice(deviceId) {
                    // 查看设备详情
                    this.selectedDevice = this.devices.find(d => d.device_id === deviceId);
                    this.currentView = 'deviceControl';
                },
                controlDevice(deviceId) {
                    // 控制设备
                    this.selectedDevice = this.devices.find(d => d.device_id === deviceId);
                    this.currentView = 'deviceControl';
                },
                selectAllDevices() {
                    // 全选设备
                    this.selectedDevices = this.availableDevices.map(d => d.device_id);
                },
                executeMultiControl() {
                    // 执行多设备控制
                    alert(`对 ${this.selectedDevices.length} 台设备执行 ${this.multiControlType} 操作`);
                },
                getStatusType(status) {
                    // 根据状态返回标签类型
                    const statusMap = {
                        '运行中': 'success',
                        '等待中': 'warning',
                        '已完成': 'info',
                        '失败': 'danger'
                    };
                    return statusMap[status] || 'info';
                },
                viewTask(taskId) {
                    // 查看任务详情
                    alert(`查看任务 ${taskId}`);
                },
                cancelTask(taskId) {
                    // 取消任务
                    alert(`取消任务 ${taskId}`);
                },
                submitTaskForm() {
                    // 提交任务表单
                    this.$refs.taskForm.validate((valid) => {
                        if (valid) {
                            alert('任务创建成功');
                            this.resetTaskForm();
                        } else {
                            alert('请填写必填字段');
                            return false;
                        }
                    });
                },
                resetTaskForm() {
                    // 重置任务表单
                    this.$refs.taskForm.resetFields();
                },
                viewScript(scriptId) {
                    // 查看脚本详情
                    alert(`查看脚本 ${scriptId}`);
                },
                deleteScript(scriptId) {
                    // 删除脚本
                    alert(`删除脚本 ${scriptId}`);
                },
                submitScriptForm() {
                    // 提交脚本表单
                    this.$refs.scriptForm.validate((valid) => {
                        if (valid) {
                            alert('脚本创建成功');
                            this.resetScriptForm();
                        } else {
                            alert('请填写必填字段');
                            return false;
                        }
                    });
                },
                resetScriptForm() {
                    // 重置脚本表单
                    this.$refs.scriptForm.resetFields();
                },
                handleUploadSuccess(response, file, fileList) {
                    // 上传成功处理
                    alert('上传成功');
                },
                handleUploadError(err, file, fileList) {
                    // 上传失败处理
                    alert('上传失败');
                },
                submitUpload() {
                    // 提交上传
                    alert('提交上传');
                },
                stopDeviceControl() {
                    // 停止设备控制
                    this.currentView = 'deviceList';
                    this.selectedDevice = null;
                },
                sendHomeCommand() {
                    // 发送Home命令
                    this.commandResult = 'Home命令已发送';
                },
                sendBackCommand() {
                    // 发送Back命令
                    this.commandResult = 'Back命令已发送';
                },
                sendRecentAppsCommand() {
                    // 发送Recent Apps命令
                    this.commandResult = 'Recent Apps命令已发送';
                },
                executeCommand() {
                    // 执行命令
                    this.commandResult = `执行命令: ${this.inputCommand}\n结果: 命令执行成功`;
                }
            },
            mounted() {
                // 初始化可用设备列表
                this.availableDevices = [...this.devices];
            }
        });
    </script>
</body>
</html>